<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: lijincheng
  Date: 2021/5/21
  Time: 11:01 上午
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>修改密码</title>
    <link href="/css/bootstrap.css" rel="stylesheet">
    <script src="/js/jquery-3.5.1.js" type="text/javascript"></script>
    <script src="/js/bootstrap.min.js" type="text/javascript"></script>
    <link href="/css/order/css.css" rel="stylesheet">
    <style>
        #div1 {
            width: 30%;
            height: 20%;
            margin-left: 35%;
            margin-top: 5%;
            background-color: #FFFFFF;
            text-align: center;
            border-radius: 2%;
            border: #cccccc 2px solid;
        }
    </style>
</head>
<body>
<div class="col-md-3" style="width: 50%" id="valid-div">
    <c:choose>
        <c:when test="${myPhone == null && myEmail != null}">
            请输入完整邮箱${myEmail}验证身份
        </c:when>
        <c:when test="${myPhone != null && myEmail == null}">
            请输入完整手机号${myPhone}验证身份
        </c:when>
        <c:otherwise>
            请输入完整手机号${myPhone} 或 完整邮箱${myEmail}验证身份
        </c:otherwise>
    </c:choose>
    <div class="input-group">
        <input type="text" class="form-control" id="account">
        <span class="input-group-addon" onclick="validAccount()">验证</span>
    </div>
</div>
<div class="col-sm-6" style="width: 50%" id="modify">
    <div class="input-group" style="margin-bottom: 2%">
        <label class="input-group-addon">输入旧密码</label>
        <input type="password" class="form-control" id="old">
    </div>
    <div class="input-group" style="margin-bottom: 2%">
        <label class="input-group-addon">输入新密码</label>
        <input type="password" class="form-control" id="new">
    </div>
    <div class="input-group">
        <button class="form-control" onclick="modify_ok()">确认修改</button>
    </div>
</div>
<div id="div1" class="card-body">
    <div class="row">
        <div class="col-md-12" style="margin-top: 2%">
            <span style="color: limegreen" class="glyphicon glyphicon-ok"></span> 发布成功了
        </div>
        <div class="col-md-12" style="margin-top: 2%">
            <span style="color: red" class="glyphicon glyphicon-dashboard"></span>
            <span id="time">05</span> 秒后自动跳转书城首页
        </div>
        <div class="col-md-12" style="margin-top: 3%;margin-bottom: 3%;">
            <a href="/" class="btn btn-primary">去首页</a>
        </div>
    </div>
</div>
</div>
<script>
    $(function () {
        $("#modify").hide();
        $("#div1").hide();
    });

    function validAccount() {
        $.ajax({
            type: "get",
            data: {"account": $("#account").val()},
            url: "/user/validAccount",
            success: function (data) {
                if (data.code == 0) {
                    $("#valid-div").hide();
                    $("#modify").show();
                } else {
                    alert(data.message);
                }
            }
        });
    }

    function modify_ok() {
        var old = $("#old").val();
        var newp = $("#new").val();
        $.ajax({
            type: "POST",
            data: {"oldValue": old, "newValue": newp},
            url: "/user/editPassword",
            success: function (data) {
                if (data.code == 0) {
                    $(":input").val('');
                    close_d();
                } else {
                    alert(data.message);
                }
            }
        });
    }

    function close_d() {
        $("#modify").hide();
        $("#div1").show();
        let currCount = 5;

        $(document).ready(function () {
            window.setInterval(setTime, 1000);
        });

        function setTime() {
            if (currCount == 1) {
                top.location.href= "/user/loginout";
            } else {
                currCount--;
                $("#time").text("0" + currCount);
            }
        }
    }
</script>
</body>
</html>
